<%--
  Created by IntelliJ IDEA.
  User: qiliping
  Date: 16/7/20
  Time: 上午11:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>上传文件</title>
    <script src="${ctx}/assets/public_skin/js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="${ctx}/assets/public_skin/js/lrz/dist/lrz.all.bundle.js" type="text/javascript"></script>

    <script>

    </script>
</head>
<body>
<div id="filelist"></div>
<input id="file" type="file" accept="image/*" />
<script type="text/javascript">
    document.querySelector('#file').addEventListener('change', function () {
        lrz(this.files[0], {
            width: 800
        })
                .then(function (rst) {
//                    alert(rst.base64);
//                    document.querySelector("#filelist").appendChild("<img src="+rst.base64+" />");
                    $("#filelist").append("<img src="+rst.base64+" width='200px' height='200px' />");

                    // 额外添加参数
                    rst.formData.append('fileLen', rst.fileLen);

                    $.ajax({
                        url: '/file_upload', // 这个地址做了跨域处理，可以用于实际调试
                        data: {img:rst.base64},
                        type: 'POST',
                        success: function (data) {
                            alert(JSON.stringify(data));
                        }
                    });


                    // 处理成功会执行
                    console.log(rst);
                })
                .catch(function (err) {
                    // 处理失败会执行
//                    alert("err");
                })
                .always(function () {
                    // 不管是成功失败，都会执行
//                    alert("always");
                });
    });
</script>
</body>
</html>
